<template>
	<view>
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption">
			<view class="hot-recommend-content">
				
				<view class="recommend-list">
					<view @click.stop="toMassageDEtail(item)" class="each-recommend-list-massage"
						v-if="massageList.length>0" :style="{'borderBottom':index==0?'1rpx solid #EFEFEF':'0'}"
						v-for="(item,index) in massageList" :key="index">
						<image class="each-recommend-list-img" :src="item&& item.images[0]" mode="aspectFill"></image>
						<view class="each-recommend-list-right">
							<view class="title">
								<view class="title-text">{{item&&item.title}}</view>
								<view class="zuikuai-time">
									<view>最快上门</view>
									<view class="time">30分钟</view>
								</view>
							</view>
							<view class="lines-2">
								{{item&&item.name}}
							</view>
							<view class="lines-3">
								<view class="price">
									{{item&&item.price}}<text>元/次</text>
								</view>
								<view class="sold-num">
									已售{{item&&item.buy_num}} <view class="lines"></view>
									好评{{item&&item.high_opinion}}条
								</view>
							</view>
							<view class="lines-4">
								<view class="technician-list">
									<view @click.stop="linkPage('/otherpages/technician/technician?id='+items.id)"
										class="each-technician"
										v-for="(items,indexs) in item&&item.technician" :key="indexs">
										<image :src="items.work_clothes_image" mode="aspectFill"></image>
										<view class="address">
											{{(items.juli/1000).toFixed(2)}}km
										</view>
									</view>
									<view class="more"
										@click.stop="linkPage('/otherpages/technician/technicianList')">
										<view>更多</view>
										<image src="../../../static/search/more.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState
	} from 'vuex' //引入mapState
	export default{
		mixins: [MescrollMixin], // 使用mixin
		data(){
			return{
				downOption: { 
					auto:false,
				},
				massageList:[]
			}
		},
		computed: {
			...mapState({
				'userLocation': 'userLocation'
			})
		},
		onLoad(option) {
			this.queryText = option.queryText
		},
		methods:{
			toMassageDEtail(item) {
				uni.navigateTo({
					url: '/otherpages/massage/massageDetail?id=' + item.id
				})
			},
			downCallback(){
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调*/
			upCallback(page) {
				this.request.httpTokenRequest({
					url: "service/getServiceList",
					method: "get"
				}, {
					page: page.num,
					lng: this.userLocation.longitude, //
					lat: this.userLocation.latitude,
					key:this.queryText,
					pageSize:10
				}).then(res => {
					if (res.code == 0) {
						this.massageList = [...this.massageList, ...res.data.data]
						this.mescroll.endSuccess(this.massageList.length);
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {
					this.mescroll.endErr();
				})
			}
		}
	}
</script>

<style lang="scss">
	
	//推荐
	.hot-recommend-content {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 4rpx 4rpx rgba(211, 211, 211, 0.12);
		border-radius: 28rpx;
		border: 1rpx solid #FFFFFF;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
	
		.hot-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 20rpx;
	
			.hot-title-text {
				font-size: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #357650;
				line-height: 48rpx;
			}
	
			.more-text {
				font-size: $uni-font-size-base;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #949393;
				line-height: 33rpx;
			}
		}
	}
	
	//景区
	.recommend-list {
		.each-recommend-list {
			display: flex;
			padding: 30rpx 0;
			.each-recommend-list-img {
				width: 270rpx;
				height: 180rpx;
				flex: 0 0 auto;
			}
			.each-recommend-list-right {
				flex-grow: 1;
				padding-left: 20rpx;
	
				.title {
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #0F0807;
					line-height: 42rpx;
					margin-bottom: 16rpx;
				}
	
				.lines-2 {
					display: flex;
					align-items: center;
					margin-bottom: 7rpx;
	
					.star-num {
						font-size: $uni-font-size-base;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #EF5233;
						line-height: 28rpx;
						margin: 0 10rpx;
					}
	
					.pinglun-num {
						font-size: $uni-font-size-base;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #888889;
						line-height: 28rpx;
					}
				}
	
				.lines-3 {
					display: flex;
					align-items: center;
	
					.address {
						font-size: $uni-font-size-base;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #888889;
						line-height: 30rpx;
					}
	
					.juli {
						font-size: $uni-font-size-base;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #888889;
						line-height: 30rpx;
						margin-left: 21rpx;
					}
	
					.price {
						font-size: $uni-font-size-base;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #EF5233;
						line-height: 28rpx;
						margin-left: auto;
					}
				}
	
				.lines-4 {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 13rpx;
					.tit {
						flex: 0 0 auto;
						padding: 0 13rpx;
						height: 26rpx;
						border-radius: 6rpx;
						border: 1rpx solid #ECECEC;
						font-size: 18rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #6985C2;
						line-height: 25rpx;
						margin-right: 11rpx;
						margin-bottom: 10rpx;
					}
				}
			}
		}
	
		// 电影
		.each-recommend-list-film {
			display: flex;
			padding: 30rpx 0;
	
			.each-recommend-list-img {
				width: 160rpx;
				height: 214rpx;
				flex: 0 0 auto;
				border-radius: 10rpx;
			}
	
			.each-recommend-list-right {
				width: 0;
				flex-grow: 1;
				flex-basis: 0;
				padding-left: 25rpx;
	
				.lines-2 {
					display: flex;
					align-items: center;
					margin-top: 7rpx;
					margin-bottom: 7rpx;
	
					view {
						font-size: $uni-font-size-base ;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #888889;
						line-height: 30rpx;
					}
	
					.lines {
						width: 1rpx;
						height: 23rpx;
						opacity: 0.4;
						border: 1rpx solid #979797;
						margin: 0 10rpx;
					}
	
					.buy-piao {
						width: 90rpx;
						height: 44rpx;
						background: #EF5233;
						border-radius: 22rpx;
						font-size: $uni-font-size-base ;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 44rpx;
						text-align: center;
						margin-left: auto;
					}
				}
	
				.lines-3,
				.lines-4,
				.lines-5 {
					font-size: $uni-font-size-base ;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #888889;
					line-height: 30rpx;
					margin-bottom: 12rpx;
				}
	
				.lines-4 {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
	
		//酒店 
		.each-recommend-list-hotel {
			display: flex;
			padding: 30rpx 0;
	
			.each-recommend-list-img {
				width: 180rpx;
				height: 180rpx;
				flex: 0 0 auto;
				border-radius: 10rpx;
			}
	
			.each-recommend-list-right {
				flex-grow: 1;
				padding-left: 25rpx;
				width: 0;
				flex-grow: 1;
				flex-basis: 0;
				.title {
					font-size: 30rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #2A2B2E;
					line-height: 40rpx;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				
	
				}
	
				.lines-2 {
					display: flex;
					align-items: center;
					margin-top: 12rpx;
	
					.pinglun-num {
						margin-left: 50rpx;
						font-size: $uni-font-size-base;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #656667;
						line-height: 28rpx;
					}
				}
	
				.lines-3 {
					display: flex;
					align-items: center;
					padding-bottom: 18rpx;
					border-bottom: 1rpx solid #EFEFEF;
	
					.tip {
						display: inline-block;
						width: 67rpx;
						height: 28rpx;
						background: #D8D8D8;
						opacity: 0.78;
						font-size: 20rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #727272;
						line-height: 28rpx;
						text-align: center;
						margin-right: 24rpx;
					}
	
					font-size: $uni-font-size-base;
					font-weight: 400;
					color: #656667;
					line-height: 28rpx;
					margin-top: 14rpx;
				}
	
				.lines-4 {
					.room-lines {
						display: flex;
						align-items: center;
						font-size: $uni-font-size-base;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #3F3F3F;
						line-height: 33rpx;
						margin-top: 16rpx;
					}
	
					.ding-text {
						width: 31rpx;
						height: 30rpx;
						background: #E02020;
						border-radius: 3rpx;
						font-size: $uni-font-size-sm;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 30rpx;
						text-align: center;
						border-radius: 3rpx;
					}
	
					.price {
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #E02020;
						line-height: 37rpx;
						margin-left: 11rpx;
						margin-right: 23rpx;
					}
	
					.room-nam {
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
	
			}
		}
	
		//按摩
		.each-recommend-list-massage {
			display: flex;
			padding: 30rpx 0;
	
			.each-recommend-list-img {
				width: 160rpx;
				height: 214rpx;
				flex: 0 0 auto;
				border-radius: 10rpx;
			}
	
			.each-recommend-list-right {
				flex-grow: 1;
				padding-left: 31rpx;
	
				.title {
					display: flex;
					align-items: center;
					justify-content: space-between;
	
					.title-text {
						font-size: 30rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #0F0807;
						line-height: 42rpx;
					}
	
					.zuikuai-time {
						width: 186rpx;
						height: 32rpx;
						margin-left: 26rpx;
						background: url('https://qiniu-cdn.maeiyun.com/imgs/massage/bg.png')no-repeat;
						background-size: 100% 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 12rpx;
						font-size: 20rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 28rpx;
	
						.time {
							color: #EF5233;
						}
					}
				}
	
				.lines-2 {
					font-size: $uni-font-size-base ;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #888889;
					line-height: 30rpx;
					margin-top: 10rpx;
				}
				.shop-lines{
					display: flex;
					align-items: flex-end;
					view{
						margin-left: 10rpx;
					}
				}
	
				.lines-3 {
					display: flex;
					align-items: center;
					margin-top: 10rpx;
	
					.price {
						font-size: 34rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #EF5233;
						line-height: 48rpx;
						display: flex;
						align-items: baseline;
	
						text {
							font-size: $uni-font-size-sm;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #EC2700;
							line-height: 25rpx;
						}
					}
	
					.sold-num {
						font-size: $uni-font-size-base;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #858587;
						line-height: 28rpx;
						display: flex;
						align-items: center;
						margin-left: auto;
	
						.lines {
							width: 1rpx;
							height: 20rpx;
							border: 1rpx solid #DBDBDB;
							margin: 0 10rpx;
						}
					}
				}
	
				.lines-4 {
					display: flex;
					align-items: center;
					margin-top: 30rpx;
	
					.technician-list {
						display: flex;
						align-items: center;
	
						.each-technician {
							width: 110rpx;
							height: 137.5rpx;
							flex: 0 0 auto;
							margin-right: 14rpx;
							position: relative;
							border-radius: 10rpx;
							overflow: hidden;
	
							.address {
								position: absolute;
								bottom: 0;
								left: 0;
								right: 0;
								font-size: 18rpx;
								color: #fff;
								background-color: rgba(0, 0, 0, 0.6);
								text-align: center;
								height: 24rpx;
								line-height: 24rpx;
							}
	
							image {
								width: 110rpx;
								height: 137.5rpx;
								border-radius: 10rpx;
							}
						}
	
						.more {
							font-size: $uni-font-size-sm;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #858587;
							line-height: 28rpx;
							margin-left: 11rpx;
							text-align: center;
	
							image {
								width: 21rpx;
								height: 20rpx;
								margin-top: 10rpx;
							}
						}
					}
				}
			}
		}
	}
</style>